{% extends "base.html" %}

{% block title %}控制面板 - 机器人管理系统{% endblock %}

{% block page_title %}控制面板{% endblock %}

{% block content %}
    <!-- 状态卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div class="bg-white rounded-xl p-6 card-shadow hover-lift">
            <div class="flex items-start justify-between">
                <div>
                    <p class="text-dark-2 text-sm font-medium">总机器人</p>
                    <h3 class="text-3xl font-bold mt-2 mb-1">{{ total_robots }}</h3>
                    <p class="text-success text-sm flex items-center">
                        <i class="fa fa-arrow-up mr-1"></i> 3 台新增
                    </p>
                </div>
                <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
                    <i class="fa fa-robot text-xl"></i>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-xl p-6 card-shadow hover-lift">
            <div class="flex items-start justify-between">
                <div>
                    <p class="text-dark-2 text-sm font-medium">运行中</p>
                    <h3 class="text-3xl font-bold mt-2 mb-1">{{ running_robots }}</h3>
                    <p class="text-success text-sm flex items-center">
                        <i class="fa fa-arrow-up mr-1"></i> {{ (running_robots / total_robots * 100) | int }}% 正常率
                    </p>
                </div>
                <div class="w-12 h-12 rounded-lg bg-success/10 flex items-center justify-center text-success">
                    <i class="fa fa-play-circle text-xl"></i>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-xl p-6 card-shadow hover-lift">
            <div class="flex items-start justify-between">
                <div>
                    <p class="text-dark-2 text-sm font-medium">待维护</p>
                    <h3 class="text-3xl font-bold mt-2 mb-1">{{ maintenance_robots }}</h3>
                    <p class="text-warning text-sm flex items-center">
                        <i class="fa fa-clock-o mr-1"></i> 需尽快处理
                    </p>
                </div>
                <div class="w-12 h-12 rounded-lg bg-warning/10 flex items-center justify-center text-warning">
                    <i class="fa fa-wrench text-xl"></i>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-xl p-6 card-shadow hover-lift">
            <div class="flex items-start justify-between">
                <div>
                    <p class="text-dark-2 text-sm font-medium">故障中</p>
                    <h3 class="text-3xl font-bold mt-2 mb-1">{{ faulty_robots }}</h3>
                    <p class="text-danger text-sm flex items-center">
                        <i class="fa fa-arrow-up mr-1"></i> {{ (faulty_robots / total_robots * 100) | int }}% 故障率
                    </p>
                </div>
                <div class="w-12 h-12 rounded-lg bg-danger/10 flex items-center justify-center text-danger">
                    <i class="fa fa-exclamation-triangle text-xl"></i>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 图表和最近任务 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        <!-- 性能图表 -->
        <div class="lg:col-span-2 bg-white rounded-xl p-6 card-shadow">
            <div class="flex items-center justify-between mb-6">
                <h3 class="font-bold text-lg">机器人性能趋势</h3>
                <div class="flex space-x-2">
                    <button class="px-3 py-1 text-xs rounded-full bg-primary/10 text-primary font-medium">日</button>
                    <button class="px-3 py-1 text-xs rounded-full bg-light-1 text-dark-2 font-medium hover:bg-primary/10 hover:text-primary transition-colors">周</button>
                    <button class="px-3 py-1 text-xs rounded-full bg-light-1 text-dark-2 font-medium hover:bg-primary/10 hover:text-primary transition-colors">月</button>
                </div>
            </div>
            <div class="h-80">
                <canvas id="performanceChart"></canvas>
            </div>
        </div>
        
        <!-- 任务状态 -->
        <div class="bg-white rounded-xl p-6 card-shadow">
            <div class="flex items-center justify-between mb-6">
                <h3 class="font-bold text-lg">任务完成情况</h3>
                <a href="{{ url_for('tasks_list') }}" class="text-primary text-sm hover:underline">查看全部</a>
            </div>
            <div class="h-80">
                <canvas id="taskChart"></canvas>
            </div>
            <div class="grid grid-cols-2 gap-4 mt-6">
                <div class="flex items-center">
                    <span class="w-3 h-3 rounded-full bg-primary mr-2"></span>
                    <span class="text-sm text-dark-2">已完成</span>
                </div>
                <div class="flex items-center">
                    <span class="w-3 h-3 rounded-full bg-secondary mr-2"></span>
                    <span class="text-sm text-dark-2">进行中</span>
                </div>
                <div class="flex items-center">
                    <span class="w-3 h-3 rounded-full bg-warning mr-2"></span>
                    <span class="text-sm text-dark-2">待处理</span>
                </div>
                <div class="flex items-center">
                    <span class="w-3 h-3 rounded-full bg-danger mr-2"></span>
                    <span class="text-sm text-dark-2">已失败</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 最近任务 -->
    <div class="bg-white rounded-xl p-6 card-shadow">
        <div class="flex items-center justify-between mb-6">
            <h3 class="font-bold text-lg">最近任务</h3>
            <a href="{{ url_for('tasks_list') }}" class="text-primary text-sm hover:underline">查看全部</a>
        </div>
        
        <div class="space-y-4">
            {% for task in recent_tasks %}
            <div class="p-4 border border-light-1 rounded-lg hover:border-primary/30 transition-colors">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-4">
                        <div class="w-12 h-12 rounded-lg 
                            {% if task.status == '已完成' %}bg-success/10 text-success
                            {% elif task.status == '进行中' %}bg-secondary/10 text-secondary
                            {% elif task.status == '待处理' %}bg-warning/10 text-warning
                            {% else %}bg-danger/10 text-danger{% endif %} 
                            flex items-center justify-center">
                            <i class="fa fa-cogs"></i>
                        </div>
                        <div>
                            <h4 class="font-medium">{{ task.name }}</h4>
                            <p class="text-sm text-dark-2">
                                {% if task.robot %}{{ task.robot.name }}{% else %}未知机器人{% endif %}
                            </p>
                        </div>
                    </div>
                    <span class="px-2 py-1 rounded-full text-xs 
                        {% if task.status == '已完成' %}bg-success/10 text-success
                        {% elif task.status == '进行中' %}bg-secondary/10 text-secondary
                        {% elif task.status == '待处理' %}bg-warning/10 text-warning
                        {% else %}bg-danger/10 text-danger{% endif %}">
                        {{ task.status }}
                    </span>
                </div>
                <div class="flex items-center justify-between mt-4 text-sm">
                    <span class="text-dark-2">
                        {% if task.status == '已完成' %}完成于
                        {% elif task.status == '进行中' %}开始于
                        {% elif task.status == '待处理' %}计划于
                        {% else %}尝试于{% endif %}
                        {{ task.start_time.strftime('%Y-%m-%d %H:%M') if task.start_time else '未知时间' }}
                    </span>
                    {% if task.status == '进行中' %}
                    <div class="w-24 bg-light-1 rounded-full h-2">
                        <div class="{% if task.status == '进行中' %}bg-secondary{% endif %} h-2 rounded-full" style="width: {{ [30 + loop.index * 15, 100] | min }}%""></div>
                    </div>
                    {% elif task.status == '已完成' or task.status == '已失败' %}
                    <span class="text-dark-2">耗时 {{ task.duration }} 分钟</span>
                    {% else %}
                    <a href="{{ url_for('create_task') }}" class="text-primary text-sm hover:underline">立即执行</a>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}

{% block scripts %}
<script>
window.pageScript = function() {
    // 性能图表
    const performanceCtx = document.getElementById('performanceChart').getContext('2d');
    const performanceChart = new Chart(performanceCtx, {
        type: 'line',
        data: {
            labels: {{ performance_data.labels | tojson }},
            datasets: [
                {
                    label: '运行效率',
                    data: {{ performance_data.efficiency | tojson }},
                    borderColor: '#165DFF',
                    backgroundColor: 'rgba(22, 93, 255, 0.1)',
                    tension: 0.4,
                    fill: true
                },
                {
                    label: '能耗水平',
                    data: {{ performance_data.energy | tojson }},
                    borderColor: '#36BFFA',
                    backgroundColor: 'rgba(54, 191, 250, 0.1)',
                    tension: 0.4,
                    fill: true
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                    labels: {
                        boxWidth: 10,
                        usePointStyle: true,
                        pointStyle: 'circle'
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    max: 100,
                    ticks: {
                        callback: function(value) {
                            return value + '%';
                        }
                    }
                }
            },
            interaction: {
                mode: 'index',
                intersect: false
            },
            animations: {
                tension: {
                    duration: 1000,
                    easing: 'linear'
                }
            }
        }
    });
    
    // 任务图表
    const taskCtx = document.getElementById('taskChart').getContext('2d');
    const taskChart = new Chart(taskCtx, {
        type: 'doughnut',
        data: {
            labels: ['已完成', '进行中', '待处理', '已失败'],
            datasets: [{
                data: [
                    {{ task_status_data.completed }},
                    {{ task_status_data.in_progress }},
                    {{ task_status_data.pending }},
                    {{ task_status_data.failed }}
                ],
                backgroundColor: [
                    '#165DFF',
                    '#36BFFA',
                    '#FF7D00',
                    '#F53F3F'
                ],
                borderWidth: 0,
                hoverOffset: 4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            cutout: '70%',
            plugins: {
                legend: {
                    display: false
                }
            },
            animations: {
                animateRotate: true,
                animateScale: true
            }
        }
    });
};
</script>
{% endblock %}
